<%--
  Created by IntelliJ IDEA.
  User: gacl
  Date: 2017/11/2
  Time: 15:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>基于Servlet3.0+plupload文件上传插件实现的大文件上传（一）</title>
    <!--引入样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/plupload-2.3.4/js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css"/>
</head>
<body>
<form id="f1" action="${pageContext.request.contextPath}/pluploadFileInfoServlet" method="post">
  <table border="1">
    <tr>
      <td colspan="2">
        <div id="uploader">您的浏览器没有安装Flash插件，或不支持HTML5！</div>
        <!--
        <button onclick="$('#uploader').pluploadQueue().start();">开始上传</button>
        <button onclick="$('#uploader').pluploadQueue().stop();">停止上传</button>
         -->
      </td>
    </tr>
    <tr>
      <th>姓名</th>
      <td><input name="name" value="孤傲苍狼" /></td>
    </tr>
    <tr>
      <th>密码</th>
      <td><input name="pwd" value="123456" /></td>
    </tr>
  </table>
  <button type="submit">提交表单</button>
</form>
</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/plupload-2.3.4/js/plupload.full.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/plupload-2.3.4/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/plupload-2.3.4/js/i18n/zh_CN.js"></script>

<script type="text/javascript">
  $(function() {
    $("#uploader").pluploadQueue({
      runtimes : 'html5,flash',//设置运行环境，会按设置的顺序，可以选择的值有html5,gears,flash,silverlight,browserplus,html4
      flash_swf_url : '${pageContext.request.contextPath}/static/plugins/plupload-2.3.4/js/Moxie.swf',// Flash环境路径设置
      silverlight_xap_url : '${pageContext.request.contextPath}/static/plugins/plupload-2.3.4/js/Moxie.xap',//silverlight环境路径设置
      url : '${pageContext.request.contextPath}/plUploadServlet',//处理上传文件的Controller
      max_file_size : '10gb',//100b, 10kb, 10mb, 1gb
      chunk_size : '1mb',//分块大小，小于这个大小的不分块
      unique_names : true,//生成唯一文件名
      // 如果可能的话，压缩图片大小
      // resize : { width : 320, height : 240, quality : 90 },
      /*
       注释掉filters，解决在Chrome下选择文件时file打开很慢
       // 指定要浏览的文件类型
      filters : [ {
        title : 'Image files',
        extensions : 'jpg,gif,png'
      }, {
        title : 'Zip files',
        extensions : 'zip,7z,rar'
      } ],*/
      init : {
        FileUploaded : function(up, file, info) {//文件上传完毕触发
          console.info(up);
          console.info(file);
          console.info(info);
          var response = $.parseJSON(info.response);
          if (response.status) {
            $('#f1').append('<input type="hidden" name="fileUrl" value="'+response.fileUrl+'"/>');
            $('#f1').append('<input type="hidden" name="fileName" value="'+file.name+'"/><br/>');
          }
        }
      }
    });

    // 客户端表单验证
    $('form').submit(function(e) {
      var uploader = $('#uploader').pluploadQueue();
      if (uploader.files.length > 0) {// 判断队列中是否有文件需要上传
        uploader.bind('StateChanged', function() {// 在所有的文件上传完毕时，提交表单
          if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
            $('form')[0].submit();
          }
        });
        uploader.start();
      } else {
        alert('请选择至少一个文件进行上传！');
      }
      return false;
    });

  });
</script>
</html>
